<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-button type="success" @click="handleCreate"
            >&emsp;新增&emsp;</el-button
          >
          <el-button type="danger" @click="handleDeleteAll">批量删除</el-button>

          <el-form
            :inline="true"
            :model="listQuery"
            ref="listQuery"
            class="demo-form-inline"
          >
            <!-- <el-form-item label="">
              <el-select filterable v-model="listQuery.group_type" placeholder="配置分组">
                  <el-option
                  v-for="item in groupOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="">
              <el-input
                type="text"
                v-model="listQuery.keyword"
                placeholder="管理员帐号/邮箱/手机号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
              <el-button type="primary" @click="resetSubmit">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div class="item">
        <el-table
          v-loading="listLoading"
          ref="dataList"
          :data="menuList"
          @selection-change="handleSelectionChange"
          style="width:100%;margin-bottom: 20px;"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="admin_id" label="序号"> </el-table-column>
          <el-table-column prop="admin_name" label="管理员帐号">
          </el-table-column>
          <el-table-column prop="realname" label="管理员姓名">
          </el-table-column>
          <el-table-column prop="phone_number" label="管理员手机号">
          </el-table-column>
          <el-table-column prop="email" label="邮箱"> </el-table-column>
          <el-table-column prop="role" label="管理员角色"> </el-table-column>
          <el-table-column prop="addtime" label="创建时间"> </el-table-column>
          <el-table-column prop="last_login_ip" label="最后一次登录IP">
          </el-table-column>
          <el-table-column prop="last_login_time" label="最后一次登录时间">
          </el-table-column>
          <el-table-column prop="login_count" label="累积登录次数">
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
              <el-tag type="danger" v-if="scope.row.status === 2">封禁</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                plain
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                plain
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.perPage"
          @pagination="getList"
        />
      </div>
    </el-card>
    <!-- 删除弹框 -->
    <el-dialog
      title="确定删除吗?"
      :visible.sync="deleteDialogVisible"
      width="435px"
    >
      <span style=""
        ><em style="font-style:normal;color:red">删除后不可恢复</em
        >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增编辑弹框 -->
    <el-dialog v-dialogDrag title="新增" :visible.sync="dialogFormVisible">
      <el-form
        :model="dynamicValidateForm"
        :rules="dynamicValidateRules"
        ref="dynamicValidateForm"
        label-width="120px"
      >
        <el-form-item label="管理员帐号" prop="admin_name">
          <el-input
            v-model="dynamicValidateForm.admin_name"
            placeholder="请输入管理员帐号(1-30个字符)"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="dynamicValidateForm.password"
            placeholder="请输入密码"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            v-model="dynamicValidateForm.confirm_password"
            placeholder="再次输入密码"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="dynamicValidateForm.email"
            placeholder="请输入邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone_number">
          <el-input
            v-model="dynamicValidateForm.phone_number"
            placeholder="请输入手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realname">
          <el-input
            v-model="dynamicValidateForm.realname"
            placeholder="管理员真实姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="所属角色" prop="role_id">
          <el-select
            filterable
            v-model="dynamicValidateForm.role_id"
            clearable
            placeholder="请选择所属角色"
          >
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-radio v-model="dynamicValidateForm.status" label="1"
            >启用</el-radio
          >
          <el-radio v-model="dynamicValidateForm.status" label="2"
            >禁用</el-radio
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="confirmSubmit('dynamicValidateForm')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 新增编辑弹框 -->
    <el-dialog v-dialogDrag title="编辑" :visible.sync="dialogEditFormVisible">
      <el-form
        :model="dynamicValidateForm"
        :rules="dynamicEditValidateRules"
        ref="dynamicValidateForm"
        label-width="120px"
      >
        <el-form-item label="管理员帐号" prop="admin_name">
          <el-input
            v-model="dynamicValidateForm.admin_name"
            disabled
            placeholder="请输入管理员帐号(1-30个字符)"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="">
          <el-input
            v-model="dynamicValidateForm.password"
            placeholder="请输入密码"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="">
          <el-input
            v-model="dynamicValidateForm.confirm_password"
            placeholder="再次输入密码"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="dynamicValidateForm.email"
            placeholder="请输入邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone_number">
          <el-input
            v-model="dynamicValidateForm.phone_number"
            placeholder="请输入手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realname">
          <el-input
            v-model="dynamicValidateForm.realname"
            placeholder="管理员真实姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="所属角色" prop="role_id">
          <el-select
            filterable
            v-model="dynamicValidateForm.role_id"
            clearable
            placeholder="请选择所属角色"
          >
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-radio v-model="dynamicValidateForm.status" label="1"
            >启用</el-radio
          >
          <el-radio v-model="dynamicValidateForm.status" label="2"
            >禁用</el-radio
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogEditFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="confirmSubmit('dynamicValidateForm')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRoleData,
  listData,
  postAddData,
  putEditData,
  deleteData
} from "@/api/config/admin";

import md5 from "js-md5";
import treeTable from "@/components/TreeTable";
import { validateCh } from "@/utils/validate";

export default {
  data() {
    return {
      // 要修改的当前行的id
      row_id: 0,
      dynamicEditValidateRules: {
        status: [{ required: true, trigger: "change" }],
        role_id: [
          { required: true, trigger: "change", message: "请选择所属角色" }
        ]
      },
      dynamicValidateRules: {
        admin_name: [
          {
            required: true,
            message: "请输入管理员帐号",
            trigger: "blur",
            min: 1,
            max: 30
          }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirm_password: [
          { message: "请输入确认密码", required: true, trigger: "blur" }
        ],
        email: [
          {
            type: "email",
            required: false,
            message: "请输入邮箱",
            trigger: "blur"
          }
        ],
        phone_number: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          }
        ],
        realname: [
          { required: true, trigger: "blur", message: "请输入真实姓名" }
        ],
        status: [{ required: true, trigger: "change" }],
        role_id: [
          { required: true, trigger: "change", message: "请选择所属角色" }
        ]
      },
      dynamicValidateForm: {
        admin_name: undefined,
        password: undefined,
        confirm_password: undefined,
        role_id: undefined,
        email: undefined,
        phone_number: undefined,
        realname: undefined,
        status: "1"
      },
      dialogFormVisible: false,
      dialogEditFormVisible: false,
      deleteDialogVisible: false,
      dialogStatus: "",
      // dialog的头部信息
      titleMap: {
        update: "编辑",
        create: "添加"
      },
      listLoading: false,
      total: 0,
      menuList: [],
      listQuery: {
        page: 1,
        perPage: 10,
        group_type: undefined,
        keyword: undefined
      },
      roleOptions: [{ label: "超级管理员", value: 0 }],
      // 勾选内容
      multipleSelection: [],
      // 要删除的内容的ids
      dataIds: ""
    };
  },
  created() {
    this.getRoleList();
    this.getList();
  },
  methods: {
    // 所有角色
    getRoleList() {
      listRoleData().then(response => {
        for (let key in response.data) {
          this.roleOptions.push({
            value: parseInt(key),
            label: response.data[key]
          });
        }
      });
    },
    getList() {
      this.listLoading = true;
      let urlData = "?";
      if (this.listQuery.page) {
        urlData = urlData + `page=${this.listQuery.page}&`;
      }
      if (this.listQuery.perPage) {
        urlData = urlData + `perPage=${this.listQuery.perPage}`;
      }
      if (this.listQuery.keyword) {
        urlData = urlData + `&keyword=${this.listQuery.keyword}`;
      }
      // 发送异步请求
      // this.listLoading = false
      listData(urlData).then(response => {
        this.menuList = response.data.list;
        this.total = response.data.meta.total;
        this.listLoading = false;
      });
    },
    // 点击查询
    searchSubmit() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 点击重置
    resetSubmit() {
      this.listQuery.page = 1;
      this.listQuery.perPage = 10;
      this.listQuery.keyword = undefined;
    },
    // 点击新增
    handleCreate() {
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    // 点击编辑
    handleUpdate(row) {
      this.row_id = row.admin_id;
      this.dynamicValidateForm.admin_name = row.admin_name;
      this.dynamicValidateForm.password = row.password;
      this.dynamicValidateForm.confirm_password = row.confirm_password;
      this.dynamicValidateForm.email = row.email;
      this.dynamicValidateForm.phone_number = row.phone_number;
      this.dynamicValidateForm.realname = row.realname;
      this.dynamicValidateForm.role_id = row.role_id;
      this.dynamicValidateForm.status = row.status.toString();
      this.dialogStatus = "update";
      this.dialogEditFormVisible = true;
    },
    // 重置表单内容
    resetForm() {
      if (this.$refs["dynamicValidateForm"] !== undefined) {
        this.$refs["dynamicValidateForm"].resetFields();
      }
      this.dynamicValidateForm = {
        admin_name: undefined,
        password: undefined,
        confirm_password: undefined,
        role_id: undefined,
        email: undefined,
        phone_number: undefined,
        realname: undefined,
        status: "1"
      };
    },
    confirmSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogStatus === "create") {
            // this.dynamicValidateForm)
            let newForm = {
              admin_name: this.dynamicValidateForm.admin_name,
              password: md5(this.dynamicValidateForm.password),
              role_id: this.dynamicValidateForm.role_id,
              email: this.dynamicValidateForm.email,
              phone_number: this.dynamicValidateForm.phone_number,
              realname: this.dynamicValidateForm.realname,
              confirm_password: md5(this.dynamicValidateForm.confirm_password),
              status: this.dynamicValidateForm.status
            };
            postAddData(newForm).then(response => {
              if (response.code === 200) {
                this.getList();
                this.dialogFormVisible = false;
                this.$notify({
                  type: "success",
                  message: "操作成功",
                  position: "bottom-right",
                  showClose: false,
                  duration: 3000
                });
              } else {
                this.$message({
                  message: response.message,
                  type: "error"
                });
              }
            });
          } else {
            let newForm = {};
            if (this.dynamicValidateForm.admin_name) {
              newForm.admin_name = this.dynamicValidateForm.name;
            }
            if (this.dynamicValidateForm.password) {
              newForm.password = md5(this.dynamicValidateForm.password);
            }
            if (this.dynamicValidateForm.confirm_password) {
              newForm.confirm_password = md5(
                this.dynamicValidateForm.confirm_password
              );
            }
            if (this.dynamicValidateForm.email) {
              newForm.email = this.dynamicValidateForm.email;
            }
            if (this.dynamicValidateForm.phone_number) {
              newForm.phone_number = this.dynamicValidateForm.phone_number;
            }
            if (this.dynamicValidateForm.realname) {
              newForm.realname = this.dynamicValidateForm.realname;
            }
            if (
              this.dynamicValidateForm.role_id === 0 ||
              this.dynamicValidateForm.role_id
            ) {
              newForm.role_id = this.dynamicValidateForm.role_id;
            }
            if (this.dynamicValidateForm.status) {
              newForm.status = parseInt(this.dynamicValidateForm.status);
            }

            putEditData(this.row_id, newForm).then(response => {
              if (response.code === 200) {
                this.getList();
                this.dialogEditFormVisible = false;
                this.$notify({
                  type: "success",
                  message: "操作成功",
                  position: "bottom-right",
                  showClose: false,
                  duration: 3000
                });
              } else {
                this.$message({
                  message: response.message,
                  type: "error"
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 点击单个删除
    handleDelete(row) {
      this.dataIds = { ids: `${row.admin_id}` };
      this.deleteDialogVisible = true;
    },
    // 点击批量删除
    handleDeleteAll() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: "请先勾选要删除的内容",
          type: "warning"
        });
        return;
      } else if (this.multipleSelection.length !== 0) {
        let ids = "";
        for (let key in this.multipleSelection) {
          ids += `${this.multipleSelection[key].admin_id},`;
        }
        ids = ids.substring(0, ids.length - 1);
        this.dataIds = { ids: ids };
      }
      this.deleteDialogVisible = true;
    },
    // 确定删除
    confirmDelete() {
      this.deleteDialogVisible = false;
      deleteData(this.dataIds).then(response => {
        if (response.code === 200) {
          this.getList();
          this.deleteDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        } else {
          this.$message({
            message: response.message,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

::v-deep .el-card__header {
  padding-bottom: 0;
}
</style>
